<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>

    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
</head>

<body>
    <div id="app"></div>
</body>


<script type="text/babel">

    function Appheader() { return (<h1>头部</h1>) }
    function Getname(props) { return (<h3>你好呀，{props.name}</h3>) }

    class Welcome extends React.Component {
        constructor() {
            super()
            this.state = {
                foo: 'bar'
            }

            setTimeout(() => {
                this.setState({ foo: '草你妈逼' })
            }, 1000);
        }

        render() {
            return (<h1>Hello, {this.state.foo}</h1>)
        }
    }




    const element = (
        <div>
            <Appheader />
            <Getname name="张三" />
            <Getname name="李四" />

            <section>
                <p>这是部分1</p>
                <p>这是部分2</p>
            </section>
            <Welcome />
        </div>
    )


    ReactDOM.render(element, document.getElementById("app"))
</script>

</html>